<template>
  <view>
    <view class="container flex_p" v-if="userId">
      <view class="header">
        <text class="title rflex flex_y_center flex_x_center">旋转阀调查表</text>
        <text class="subtitle">为了使设计满足贵方的要求，请按照下表正确填写，以便我们做出更加合理化的工艺。</text>
      </view>
      <uv-form ref="formRef" :model="form" :rules="rules" labelWidth="130px" errorType="border-bottom">
        <view class="section-title">一、物料特性</view>
        <view class="cardBox">
          <uv-form-item label="物料名称" prop="materialName" required border-bottom>
            <uv-input v-model="form.materialName" placeholder="请输入物料名称" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="颗粒直径" prop="particleDiameterValue" required border-bottom>
            <uv-input v-model="form.particleDiameterValue" input-align="right"  border="none" placeholder="请输入颗粒直径" />
          </uv-form-item>
          <uv-form-item label="颗粒直径单位" prop="particleDiameterUnit" required border-bottom>
            <uv-radio-group v-model="form.particleDiameterUnit">
              <uv-radio :customStyle="{marginRight: '10px'}" size="20"  v-for="item in particleDiameterUnit" :label="item" :key="item" :name="item"></uv-radio>
            </uv-radio-group>
          </uv-form-item>
          <uv-form-item label="物料形状" prop="materialShape" borderBottom required>
            <uv-radio-group v-model="form.materialShape">
              <uv-radio :customStyle="{marginRight: '10px',marginBottom: '8px',marginTop: '5px'}" size="20"  v-for="item in materialShape" :label="item" :key="item" :name="item"></uv-radio>
            </uv-radio-group>
          </uv-form-item>
          <uv-form-item label="物料密度(t/m³)" prop="materialDensity" borderBottom required>
            <uv-input placeholder="请输入物料密度" input-align="right" border="none" v-model="form.materialDensity"></uv-input>
          </uv-form-item>
          <uv-form-item label="堆积" prop="stackDensityStack" borderBottom required>
            <uv-input placeholder="请输入堆积" input-align="right" border="none" v-model="form.stackDensityStack"></uv-input>
          </uv-form-item>
          <uv-form-item label="堆积密度(t/m³)" prop="stackDensityDensity" borderBottom required>
            <uv-input placeholder="请输入堆积密度" input-align="right" border="none" v-model="form.stackDensityDensity"></uv-input>
          </uv-form-item>
          <uv-form-item label="流动性" prop="fluidity" borderBottom required>
            <uv-radio-group v-model="form.fluidity">
              <uv-radio :customStyle="{marginRight: '10px',marginBottom: '8px',marginTop: '5px'}" size="20"  v-for="item in fluidity" :label="item" :key="item" :name="item"></uv-radio>
            </uv-radio-group>
          </uv-form-item>
          <uv-form-item label="物料温度(°C)" prop="materialTemperature" borderBottom required>
            <uv-input placeholder="请输入物料温度" input-align="right" border="none" v-model="form.materialTemperature"></uv-input>
          </uv-form-item>
          <uv-form-item label="含水率(%)" prop="moistureContent" borderBottom required>
            <uv-input placeholder="请输入含水率" input-align="right" border="none" v-model="form.moistureContent"></uv-input>
          </uv-form-item>
          <uv-form-item label="物料特点" prop="materialFeatures" borderBottom>
            <uv-checkbox-group v-model="form.materialFeatures" placement="row">
              <uv-checkbox :customStyle="{marginRight: '10px',marginBottom: '8px',marginTop: '5px'}" size="20" v-for="item in materialFeatures" :key="item" :name="item" :label="item" />
            </uv-checkbox-group>
          </uv-form-item>
          <uv-form-item label="其他物料特点" prop="otherMaterialFeatures" borderBottom>
            <uv-input placeholder="请输入其他物料特点" border="none" input-align="right" v-model="form.otherMaterialFeatures" />
          </uv-form-item>
        </view>
        <view class="flex_h_10"></view>
        <view class="section-title">二、参数要求</view>
        <view class="cardBox">
          <uv-form-item label="能力(t/h)" prop="capacityT" border-bottom>
            <uv-input v-model="form.capacityT" placeholder="请输入能力" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="能力(M³/h)" prop="capacityM3" border-bottom>
            <uv-input v-model="form.capacityM3" placeholder="请输入能力" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="上游设备" prop="upstreamEquipment" border-bottom>
            <uv-input v-model="form.upstreamEquipment" placeholder="请输入上游设备" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="下游设备" prop="downstreamEquipment" border-bottom>
            <uv-input v-model="form.downstreamEquipment" placeholder="请输入下游设备" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="压差(KPa)" prop="pressureDifference" border-bottom>
            <uv-input v-model="form.pressureDifference" placeholder="请输入压差" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="目的" prop="purpose" border-bottom>
            <uv-radio-group v-model="form.purpose">
              <uv-radio :customStyle="{marginRight: '10px'}" size="20"  v-for="item in purpose" :label="item" :key="item" :name="item"></uv-radio>
            </uv-radio-group>
          </uv-form-item>
          <uv-form-item label="动力方式" prop="powerMode" border-bottom>
            <uv-radio-group v-model="form.powerMode">
              <uv-radio :customStyle="{marginRight: '10px',marginBottom: '8px',marginTop: '5px'}" size="20"  v-for="item in powerMode" :label="item" :key="item" :name="item"></uv-radio>
            </uv-radio-group>
          </uv-form-item>
          <uv-form-item label="入口口径-圆口DN" prop="inletCaliberDn" border-bottom>
            <uv-input v-model="form.inletCaliberDn" placeholder="请输入入口口径-圆口DN" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="入口口径-方口" prop="inletCaliberSquare" border-bottom>
            <uv-input v-model="form.inletCaliberSquare" placeholder="请输入入口口径-方口" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="出口口径-圆口DN" prop="outletCaliberDn" border-bottom>
            <uv-input v-model="form.outletCaliberDn" placeholder="请输入入口口径-圆口DN" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="出口口径-方口" prop="outletCaliberSquare" border-bottom>
            <uv-input v-model="form.outletCaliberSquare" placeholder="请输入入口口径-方口" border="none" input-align="right" />
          </uv-form-item>
        </view>
        <view class="flex_h_10"></view>
        <view class="section-title">三、现场条件</view>
        <view class="cardBox">
          <uv-form-item label="目的" prop="gasSourceCondition" border-bottom>
            <uv-radio-group v-model="form.gasSourceCondition">
              <uv-radio :customStyle="{marginRight: '10px'}" size="20"  v-for="item in gasSourceCondition" :label="item" :key="item" :name="item"></uv-radio>
            </uv-radio-group>
          </uv-form-item>
          <uv-form-item label="压力(Mpa)" prop="pressure" border-bottom>
            <uv-input v-model="form.pressure" placeholder="请输入压力" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="流量(M3/min)" prop="flow" border-bottom>
            <uv-input v-model="form.flow" placeholder="请输入流量" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="安装地点" prop="installationLocation" border-bottom>
            <uv-radio-group v-model="form.installationLocation">
              <uv-radio :customStyle="{marginRight: '10px',marginTop: '5px',marginBottom: '8px'}" size="20"  v-for="item in installationLocation" :label="item" :key="item" :name="item" />
            </uv-radio-group>
          </uv-form-item>
        </view>
        <view class="flex_h_10"></view>
        <view class="section-title">四、材质要求</view>
        <view class="cardBox">
          <uv-form-item label="设备材质" prop="equipmentMaterial" required border-bottom>
            <uv-radio-group v-model="form.equipmentMaterial">
              <uv-radio :customStyle="{marginRight: '10px',marginTop: '5px',marginBottom: '8px'}" size="20"  v-for="item in equipmentMaterial" :label="item" :key="item" :name="item" />
            </uv-radio-group>
          </uv-form-item>
        </view>
        <view class="flex_h_10"></view>
        <view class="section-title">五、联系信息</view>
        <view class="cardBox">
          <uv-form-item label="公司名称" prop="companyName" required border-bottom>
            <uv-input v-model="form.companyName" placeholder="请输入公司名称" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="填表人姓名" prop="reporterName" required border-bottom>
            <uv-input v-model="form.reporterName" placeholder="请输入填表人姓名" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="公司电话" prop="companyPhone" required border-bottom>
            <uv-input v-model="form.companyPhone" placeholder="请输入公司电话" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="传真" prop="fax" border-bottom>
            <uv-input v-model="form.fax" placeholder="请输入传真" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="填表部门" prop="reportDepartment" border-bottom>
            <uv-input v-model="form.reportDepartment" placeholder="请输入填表部门" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="技术部手机" prop="techDeptPhone" border-bottom>
            <uv-input v-model="form.techDeptPhone" placeholder="请输入技术部手机" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="电子邮箱" prop="email" border-bottom>
            <uv-input v-model="form.email" placeholder="请输入电子邮箱" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="项目" prop="project" border-bottom>
            <uv-radio-group v-model="form.project">
              <uv-radio :customStyle="{marginRight: '10px',marginTop: '5px',marginBottom: '8px'}" size="20"  v-for="item in project" :label="item" :key="item" :name="item" />
            </uv-radio-group>
          </uv-form-item>
          <uv-form-item label="项目投产时间-年" prop="projectPutIntoProductionYear" border-bottom>
            <uv-input v-model="form.projectPutIntoProductionYear" placeholder="请输入年" border="none" input-align="right" />
          </uv-form-item>
          <uv-form-item label="项目投产时间-月" prop="projectPutIntoProductionMonth" border-bottom>
            <uv-input v-model="form.projectPutIntoProductionMonth" placeholder="请输入月" border="none" input-align="right" />
          </uv-form-item>
        </view>
        <view class="flex_h_10"></view>
        <view class="section-title">六、其他说明</view>
        <view class="cardBox">
          <uv-form-item label="	其它说明" prop="otherInstructions" label-position="top">
            <view class="flex_h_10"></view>
            <uv-textarea v-model="form.otherInstructions" placeholder="请输入其它说明" />
          </uv-form-item>
        </view>
        <view class="flex_h_30"></view>
        <view class="flex_1 flex_p_lr">
          <uv-button type="primary" shape="circle" color="#2D4C98" @click="handleSubmit">提交</uv-button>
        </view>
        <view class="flex_h_30"></view>
      </uv-form>
    </view>
    <view v-else>
      <inner-login></inner-login>
    </view>
  </view>
</template>
<script>
import {getUserInfoId} from "@/utils/auth";
import InnerLogin from "@/components/innerLogin.vue";
import InvestigationApi from "@/api/investigation/investigation";
export default {
  components: {
    InnerLogin
  },
  data() {
    return {
      userId: null,
      particleDiameterUnit: ['微米', '毫米', '目'],
      materialShape: ['粉末状', '颗粒状', '粉末颗粒混合状', '片状', '其它'],
      fluidity: ['流动性好', '流动性一般', '流动性差', '其它'],
      materialFeatures: ['粘附性', '磨削性', '易碎性', '可燃性', '腐蚀性', '易固化', '吸湿性', '易爆性', '易成团', '毒性', '静电'],
      purpose: ['给料', '卸料'],
      powerMode: ['正压', '负压', '正压稀相', '正压密相', '负压稀相', '供方选定'],
      gasSourceCondition: ['无', '有'],
      installationLocation: ['厂房内', '厂房外', '四周敞开车间', '移动式'],
      equipmentMaterial: ['整体304', '与物料接触部分为304', '整体部分为Q235', '其它'],
      project: ['新建', '扩建', '改造', '其它'],
      form: {
        materialName: null,
        particleDiameterValue: null,
        particleDiameterUnit: null,
        materialShape: null,
        stackDensityStack: null,
        stackDensityDensity: null,
        fluidity: null,
        materialTemperature: null,
        moistureContent: null,
        materialFeatures: [], //需要string ,隔开
        otherMaterialFeatures: null,
        capacityT: null,
        capacityM3: null,
        upstreamEquipment: null,
        downstreamEquipment: null,
        pressureDifference: null,
        purpose: null,
        powerMode: null,
        inletCaliberDn: null,
        inletCaliberSquare: null,
        outletCaliberDn: null,
        outletCaliberSquare: null,
        pressure: null,
        flow: null,
        installationLocation: null,
        equipmentMaterial: null,
        companyName: null,
        reporterName: null,
        companyPhone: null,
        projectPutIntoProductionYear: null,
        projectPutIntoProductionMonth: null,
        otherInstructions: null,
      },
      rules: {
        materialName: [
          { required: true, message: '请输入物料名称', trigger: 'blur' }
        ],
        particleDiameterValue: [
          { required: true, message: '请输入颗粒直径', trigger: 'blur' }
        ],
        particleDiameterUnit: [
            { required: true, message: '请选择颗粒直径单位', trigger: 'change' }
        ],
        materialShape: [
          { required: true, message: '请选择物料形状', trigger: 'change' }
        ],
        materialDensity: [
          { required: true, message: '请输入物料密度', trigger: 'blur' }
        ],
        fluidity: [
          { required: true, message: '请输入流动度', trigger: 'blur' }
        ],
        materialTemperature: [
          { required: true, message: '请输入物料温度', trigger: 'blur' }
        ],
        moistureContent: [
          { required: true, message: '请输入含水率', trigger: 'blur' }
        ],
        equipmentMaterial: [
          { required: true, message: '请输入设备材质', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        reporterName: [
          { required: true, message: '请输入报告人名称', trigger: 'blur' }
        ],
        companyPhone: [
          { required: true, message: '请输入公司电话', trigger: 'blur' }
        ],
      }
    };
  },
 onShow() {
   this.userId = getUserInfoId();
 },
  methods: {
    handleSubmit() {
      if (this.form.materialFeatures.length > 0 || this.form.otherMaterialFeatures) {
        this.$refs.formRef.validate().then(res => {
          if (this.form.materialFeatures.length > 0) {
            this.form.materialFeatures = this.form.materialFeatures.join(',');
          }
          if (this.form.capacityT || this.form.capacityM3) {
            InvestigationApi.submitInvestigation(this.form).then(() => {
              uni.showToast( {
                title: '提交成功',
                icon: 'success',
                duration: 2000,
              })
              setTimeout(() => {
                uni.switchTab( {
                  url: '/pages/index'
                })
              },2000)
            });
          }else {
            uni.showToast({
              title: '能力(t/h)或能力(M³/h)需要填写一个！',
            });
          }
        });
      }else {
        uni.showToast({
          icon: 'none',
          title: '物料特点或其它物料特点需要填写一个！',
        })
      }
    },
  }
}
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style scoped lang="scss">
.header {
  padding: 20px 15px;
  background-color: #fff;
  margin-bottom: 15px;
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 10px;
  }
  .subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
  }
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.cardBox{
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
}
</style>
